<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>详情页</title>
</head>

<body>
  <div class="container-wrap">
    <div class="header">
      <div>
        <img class="logo" src="./image/logo.png">
        <img class="title" src="./image/detailTitle.png" >
        <img class="back" src="./image/back.png" >
      </div>
      <img class="headerImg" src="./image/detail.png" alt="">
    </div>
    <div class="content">
      <div class="content-title"></div>
      <div class="subTitle"></div>
    </div>
  </div>
</body>

</html>
<script type="text/javascript" src="./rem.js"></script>
<script>
  const getUrlParam = (name) => {
    let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
    let search = decodeURIComponent(window.location.search)
    let r = search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
  }
  //返回
  const handleBack = () => {
    const container = document.querySelector('.back');
    container.onclick = (event) => {
      window.history.back()
    }
  }
  const setDetail = (itemData) => {
    const titleEl = document.querySelector(".content-title");
    titleEl.innerHTML=itemData.title
    const subTitleEl = document.querySelector(".subTitle");
    subTitleEl.innerHTML="客户提供资料"
    const contentEl= document.querySelector(".content");
    for (const i in itemData.content) {
      // 资料组
      const item=itemData.content[i]
      const itemEl = document.createElement('div')
      itemEl.className='contentItem'
      contentEl.appendChild(itemEl)
      // 资料名称
      const itemTitleEl = document.createElement('div')
      itemTitleEl.className='itemTitle'
      itemTitleEl.innerText=`${Number(i)+1}、${item.title}`
      itemEl.appendChild(itemTitleEl)
      //资料说明
      const textBoxEl = document.createElement('div')
      textBoxEl.className='textBox'
      itemEl.appendChild(textBoxEl)
      for (const ind in item.list) {
        const textItem=item.list[ind]
        // 每条资料说明
        const textItemEl=document.createElement('div')
        textItemEl.innerHTML=`<img src="./image/icon.png" > ${textItem}`
        textBoxEl.appendChild(textItemEl)
      }
    }
  }
  const listData = {
    "1":{
      title:'对公开户-法人亲办',
      content:[
        {
          title:'身份证明文件',
          list:[
            '营业执照（正本、副本、电子均可）（客户盖章）',
            '法定代表人或单位负责人身份证原件及复印件（客户盖章）',
            '基本存款账户信息（仅开立一般户提供）',
          ]
        },
        {
          title:'申请书',
          list:[
            '需提供的证明文件（借款合同或其他资金结算需要的公函）（仅开立一般户提供）（客户盖章）'
          ]
        },
        {
          title:'信息采集表（反洗钱等要求）',
          list:[
            '受益所有人身份证明文件（客户盖章）'
          ]
        },
        {
          title:'企业电子银行',
          list:[
            '证书持有人身份证明文件复印件（客户盖章）'
          ]
        }
      ]
    },
    "2":{
      title:'对公开户-授权待办',
      content:[
        {
          title:'身份证明文件',
          list:[
            '营业执照（正本、副本、电子均可）（客户盖章）',
            '法定代表人或单位负责人身份证原件及复印件（客户盖章）',
            '基本存款账户信息（仅开立一般户提供）',
            '授权代理人的身份证件原件及复印件（客户盖章）'
          ]
        },
        {
          title:'申请书',
          list:[
            '需提供的证明文件（借款合同或其他资金结算需要的公函）（仅开立一般户提供）（客户盖章）'
          ]
        },
        {
          title:'信息采集表（反洗钱等要求）',
          list:[
            '受益所有人身份证明文件（客户盖章）'
          ]
        },
        {
          title:'企业电子银行',
          list:[
            '证书持有人身份证明文件复印件（客户盖章）'
          ]
        }
      ]
    },
    "3":{
      title:'对公开户-集团公司',
      content:[
        {
          title:'身份证明文件',
          list:[
            '营业执照（正本、副本、电子均可）（客户盖章）',
            '法定代表人或单位负责人身份证原件及复印件（客户盖章）',
            '基本存款账户信息（仅开立一般户提供）',
            '上级法人或主管单位身份证明文件（复印件）（客户盖章）',
            '上级法人或主管单位法定代表人或单位负责人身份证件（复印件）（客户盖章）',
            '上级法人或主管单位基本存款账户编号（客户盖章）'
          ]
        },
        {
          title:'申请书',
          list:[
            '需提供的证明文件（借款合同或其他资金结算需要的公函）（仅开立一般户提供）（客户盖章）'
          ]
        },
        {
          title:'信息采集表（反洗钱等要求）',
          list:[
            '受益所有人身份证明文件（客户盖章）'
          ]
        },
        {
          title:'企业电子银行',
          list:[
            '证书持有人身份证明文件复印件（客户盖章）'
          ]
        }
      ]
    },
  }
  window.onload =() => {
    const type = getUrlParam('type')
    const title=getUrlParam('title')
    document.title=title
    handleBack();
    setDetail(listData[type])

  }
</script>
<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 16rem;
  }

  .container-wrap {
    height: 100vh;
    width: 100vw;
    overflow-y: scroll;
    background:linear-gradient(#fdefec,#fdd8d1);
    padding: 16rem 0;
    padding-bottom: 32rem;
  }
  .header{
    position: relative;
    height: 342rem;
    padding-left: 40rem;
    padding-right: 12rem;
  }
  .logo {
    display: block;
    height: 32rem;
    margin-top: 6rem;
  }
  .title{
    display: block;
    height: 112rem;
    margin-top: 68rem;
  }
  .back{
    display: block;
    height: 52rem;
    margin-top: 32rem;
  }
  .headerImg{
    position: absolute;
    height: 342rem;
    top: 0;
    right: 12rem;
  }
  .content{
    width: 690rem;
    margin: 0 auto;
    padding: 28rem;
    min-height: 900rem;
    background-color: #fff;
    background-image: url("./image/boxStyle1.png"),url("./image/boxStyle2.png"),url("./image/boxStyle3.png"),url("./image/boxStyle4.png");
    background-repeat: no-repeat;
    background-size: 46rem;
    background-position: left 7rem top 7rem,right 7rem top 7rem,right 7rem bottom 7rem,left 7rem bottom 7rem;
    padding-bottom: 52rem;
  }
  .content-title{
    margin: 0 auto;
    height: 57rem;
    line-height: 57rem;
    text-align: center;
    padding: 12rem auto;
    font-size: 30rem;
    font-weight: bold;
    color: #000;
    width: 380rem;
    background-image: url("./image/titleStyle.png");
    background-size: 380rem;
  }
  .subTitle{
    margin-top: 48rem;
    font-size: 32rem;
    font-weight: bold;
    color: #000;
  }
  .contentItem{
    margin-top: 6rem;
  }
  .itemTitle{
    line-height: 60rem;
    font-size: 28rem;
    font-weight: bold;
    color: #000;
  }
  .textBox div{
    line-height: 44rem;
    font-size: 26rem;
    color: #000;
  }
  .textBox img{
    width: 12rem;
  }
</style>